<template>
  <Modal
      v-model="modal.visible"
      :title="modal.title"
      width="400"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="字典名称" prop="dict_name">
        <el-input v-model="formData.dict_name"/>
      </el-form-item>
      <el-form-item label="字典类型" prop="dict_code">
        <el-input v-model="formData.dict_code"/>
      </el-form-item>
      <el-form-item label="字典状态" prop="dict_status">
        <el-radio-group v-model="formData.dict_status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="formData.remark" :autoSize="{minRows: 4}"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input type="number" v-model="formData.sort"/>
      </el-form-item>
    </el-form>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "DictModel"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue"
import Modal from '@/components/Modal.vue'
import {systemDictAddType, systemDictListItemType} from '@/type/system.dict'
import {useModelCreateFormData} from '@/hooks/useModelCreate'
import {ElMessage, FormInstance, FormRules} from 'element-plus'
import {dictAdd, dictEdit} from '@/api/system.dict'

const form = ref<FormInstance>()

const emit = defineEmits<{
  (event: 'list'): void
}>()

const modal = reactive({
  visible: false,
  title: "",
  type: 0,
  id: 0
})

const formData = reactive<systemDictAddType>({
  dict_name: "",
  dict_code: "",
  dict_status: 1,
  remark: "",
  sort: 0
})

const rules:FormRules<systemDictAddType> = {
  dict_name: [
      {required: true, message: '请输入字典名称', trigger: 'blur'},
  ],
  dict_code: [
      {required: true, message: '请输入字典类型', trigger: 'blur'},
  ],
  dict_status: [
      {required: true, message: '请选择状态', trigger: 'blur'},
  ],
  remark: [
      {required: false, message: '请输入备注', trigger: 'blur'},
  ],
  sort: [
      {required: false, message: '请输入排序', trigger: 'blur'},
  ]
}

const handleOk = () => {
  form.value?.validate((valid) => {
    if (valid) {
      if (modal.type === 0) {
        dictAdd(formData).then(res => {
          if (res.code === 200) {
            modal.visible = false
            ElMessage.success(res.msg)
            emit("list")
          }
        })
      }
      if (modal.type === 1) {
        dictEdit({
          id: modal.id,
          ...formData
        }).then(res => {
          if (res.code === 200) {
            modal.visible = false
            ElMessage.success(res.msg)
            emit("list")
          }
        })
      }
    }
  })
}

const handleCancel = () => {
  modal.visible = false
}

const create = (title: string, type: 0|1, row?: systemDictListItemType) => {
  useModelCreateFormData<systemDictAddType>(formData, row)
  formData.dict_status = 1
  modal.title = title
  modal.type = type
}

const init = () => {
  create("添加字典类型", 0)
  nextTick(() => {
    modal.visible = true
    form.value?.clearValidate()
  })
}

const edit = (row: systemDictListItemType) => {
  create("编辑字典类型", 1, row)
  modal.id = row.id
  nextTick(() => {
    modal.visible = true
  })
}

defineExpose({
  init,
  edit
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
